Cách PWA, WebAssembly và ChromeOS giúp một trình chỉnh sửa video dựa trên web mang lại hiệu suất tốt hơn và trải nghiệm hấp dẫn hơn cho 12 triệu người dùng.
97%
Mức tăng số lượt cài đặt PWA hằng tháng
2,3x
Cải thiện hiệu suất
9%
Tỷ lệ giữ chân người dùng PWA cao hơn
Clipchamp là trình chỉnh sửa video trực tuyến trong trình duyệt, giúp mọi người kể những câu chuyện đáng chia sẻ thông qua video. Trên toàn thế giới, hơn 12 triệu nhà sáng tạo sử dụng Clipchamp để dễ dàng chỉnh sửa video. Chúng tôi cung cấp các giải pháp đơn giản để tạo video, từ các công cụ trực quan như cắt và cắt bớt cho đến các tính năng thiết thực như trình quay màn hình và thậm chí là một trình tạo meme.
Ai sử dụng Clipchamp?
Người dùng của chúng tôi (hay còn gọi là người chỉnh sửa hằng ngày) rất đa dạng. Bạn không cần phải có chuyên môn để trở thành một nhà biên tập video bằng Clipchamp. Cụ thể, chúng tôi nhận thấy các nhóm bán hàng, đào tạo hỗ trợ và tiếp thị sản phẩm đang sử dụng webcam và trình ghi màn hình để tạo nội dung giải thích nhanh bằng văn bản và ảnh GIF nhằm thu hút người xem. Chúng tôi cũng nhận thấy nhiều doanh nghiệp nhỏ chỉnh sửa và đăng video lên mạng xã hội khi đang di chuyển.
Họ gặp phải những thách thức gì?
Chúng tôi hiểu rằng việc biên tập video có thể khiến bạn lo lắng khi mới bắt đầu. Giả định là việc này khó, có thể là do những trải nghiệm khó chịu trước đây với phần mềm chỉnh sửa phức tạp. Ngược lại, Clipchamp tập trung vào sự dễ dàng và đơn giản, cung cấp tính năng hỗ trợ lớp phủ văn bản, video và nhạc có sẵn, mẫu và nhiều tính năng khác.
Chúng tôi nhận thấy hầu hết các nhà biên tập thông thường không muốn tạo ra những kiệt tác điện ảnh. Chúng tôi thường xuyên trò chuyện với người dùng và liên tục được nhắc rằng họ bận rộn và chỉ muốn chia sẻ câu chuyện của mình với thế giới một cách nhanh chóng và dễ dàng nhất có thể. Vì vậy, đây là một điểm mà chúng tôi tập trung vào.
Phát triển ứng dụng web tiến bộ (PWA) Clipchamp
Tại Clipchamp, chúng tôi luôn nỗ lực giúp mọi người kể câu chuyện của mình thông qua video. Để hiện thực hoá tầm nhìn này, chúng tôi sớm nhận ra rằng việc cho phép người dùng sử dụng cảnh quay của riêng họ khi tạo dự án video là rất quan trọng.
Thông tin chi tiết đó đã tạo áp lực cho nhóm kỹ sư của Clipchamp để họ phải đưa ra một công nghệ có thể xử lý hiệu quả các tệp phương tiện có kích thước vài GB trong một ứng dụng web. Do hạn chế về băng thông mạng, chúng tôi nhanh chóng loại trừ giải pháp dựa trên đám mây truyền thống. Việc tải các tệp nội dung đa phương tiện lớn lên từ kết nối Internet bán lẻ sẽ luôn dẫn đến thời gian chờ rất lớn trước khi có thể bắt đầu chỉnh sửa, dẫn đến trải nghiệm người dùng kém hiệu quả.
Điều đó khiến chúng tôi chuyển sang một giải pháp hoàn toàn trong trình duyệt, trong đó tất cả các thao tác "nặng" của quá trình xử lý video đều được thực hiện cục bộ bằng cách sử dụng các tài nguyên phần cứng có sẵn trên thiết bị của người dùng cuối. Chúng tôi đã đặt cược chiến lược vào trình duyệt Chrome và thông qua tiện ích, nền tảng ChromeOS để giúp chúng tôi vượt qua những thách thức không thể tránh khỏi khi xây dựng một nền tảng tạo video trong trình duyệt.
Việc xử lý video đòi hỏi rất nhiều tài nguyên, ảnh hưởng đến cả tài nguyên máy tính và bộ nhớ. Chúng tôi bắt đầu xây dựng phiên bản đầu tiên của Clipchamp dựa trên ứng dụng gốc (Portable) Native Client (PNaCl) của Google. Mặc dù cuối cùng đã ngừng hoạt động, nhưng PNaCl là một xác nhận tuyệt vời cho nhóm chúng tôi rằng các ứng dụng web có thể nhanh và có độ trễ thấp, đồng thời vẫn chạy trên phần cứng của người dùng cuối.
Sau này, khi chuyển sang WebAssembly, chúng tôi rất vui khi thấy Chrome đi đầu trong việc tích hợp các tính năng sau MVP như thao tác bộ nhớ hàng loạt, tạo luồng và gần đây nhất là thao tác vectơ có chiều rộng cố định. Nhóm kỹ thuật của chúng tôi đã rất mong đợi tính năng này, giúp chúng tôi có thể tối ưu hoá ngăn xếp xử lý video để tận dụng các thao tác SIMD phổ biến trên các CPU hiện đại. Nhờ tận dụng tính năng hỗ trợ WebAssembly SIMD của Chrome, chúng tôi có thể tăng tốc một số khối lượng công việc đặc biệt đòi hỏi cao, chẳng hạn như giải mã và mã hoá video 4K.
Với ít kinh nghiệm trước đây và chưa đầy một tháng nỗ lực của một trong các kỹ sư, chúng tôi đã cải thiện hiệu suất lên 2,3 lần. Mặc dù vẫn chỉ giới hạn ở bản dùng thử theo nguồn gốc Chrome, nhưng chúng tôi đã có thể triển khai các tính năng nâng cao SIMD này cho phần lớn người dùng. Mặc dù người dùng của chúng tôi chạy nhiều chế độ thiết lập phần cứng khác nhau, nhưng chúng tôi vẫn có thể xác nhận mức tăng hiệu suất tương ứng trong bản phát hành chính thức mà không thấy bất kỳ tác động bất lợi nào đến tỷ lệ lỗi.
Gần đây, chúng tôi đã tích hợp API WebCodecs mới nổi, hiện có trong một bản dùng thử theo nguyên gốc khác của Chrome. Khi sử dụng tính năng mới này, chúng tôi có thể cải thiện hơn nữa hiệu suất giải mã video trên phần cứng có thông số kỹ thuật thấp như trên nhiều Chromebook phổ biến.
Sau khi tạo PWA, điều quan trọng là bạn phải khuyến khích người dùng sử dụng ứng dụng đó. Cũng như nhiều ứng dụng web, chúng tôi đã tập trung vào việc dễ dàng truy cập, bao gồm cả các tính năng như đăng nhập bằng mạng xã hội (bao gồm cả Google), giúp người dùng nhanh chóng truy cập vào nơi họ có thể chỉnh sửa video, sau đó dễ dàng xuất video. Ngoài ra, chúng tôi đã quảng bá lời nhắc cài đặt PWA trong thanh công cụ và dưới dạng thông báo bật lên trong trình đơn điều hướng.
Kết quả
PWA Chrome có thể cài đặt của chúng tôi hoạt động rất tốt. Chúng tôi rất vui khi thấy tỷ lệ giữ chân người dùng PWA cao hơn 9% so với người dùng máy tính thông thường. Số lượt cài đặt PWA đã tăng lên đáng kể, tăng với tốc độ 97% mỗi tháng kể từ khi chúng tôi ra mắt cách đây 5 tháng. Và như đã đề cập trước đó, các tính năng nâng cao SIMD của WebAssembly đã cải thiện hiệu suất lên 2, 3 lần.
Tương lai
Chúng tôi rất ngạc nhiên khi thấy mức độ tương tác và mức độ sử dụng ứng dụng web tiến bộ (PWA) của mình. Chúng tôi cho rằng tỷ lệ giữ chân người dùng Clipchamp đã được cải thiện vì PWA được cài đặt và dễ truy cập hơn. Chúng tôi cũng nhận thấy PWA hoạt động hiệu quả hơn cho trình chỉnh sửa, giúp trình chỉnh sửa hấp dẫn hơn và thu hút mọi người quay lại.
Nhìn về tương lai, chúng tôi rất hào hứng về cơ hội mà ChromeOS mang đến cho nhiều người dùng hơn để hoàn thành nhiều việc hơn mà không gặp nhiều phiền toái. Cụ thể, chúng tôi rất hào hứng về một số tính năng tích hợp tiện lợi với hệ điều hành cục bộ khi làm việc với các tệp. Chúng tôi cho rằng việc này sẽ giúp đẩy nhanh quy trình làm việc cho các biên tập viên bận rộn hằng ngày. Đây là một trong những ưu tiên hàng đầu của chúng tôi.